<template>
  <view>

    <view class="content">
        <view class="date">
            <view>你的中国式星座是</view>
            <view class="info">{{content.name}}</view>
            <view class="date-body">{{content.date}}</view>
        </view>

        <view class="meaning">
            {{content.meaning}}
        </view>

        <view class="date" style="padding-bottom: 0;">
            <view>人格魅力</view>
            <view class="date-body">{{content.info}}</view>
        </view>
        <view class="date">
            <view>恋爱技巧</view>
            <view class="date-body">{{content.love}}</view>
        </view>


    </view>

    <view class="age" @click="reCommit"></view>
    <image
        class="tip"
        src="http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20240207/32d033831817facdf2bd1affb85934f0.png"
        mode="widthFix"
      ></image>
  </view>
</template>

<script setup lang="ts">
import { EnumStatus } from "@/utils/constants";
interface IProps {
    content:any
}
const props = withDefaults(defineProps<IProps>(), {})
const emit = defineEmits(['update:defStatus'])
const reCommit =()=>{
emit('update:defStatus',EnumStatus.STATUS)
}

</script>

<style lang="scss" scoped>

   .age{
        position: absolute;
        z-index: 99;
        top: 83%;
        height: 140rpx;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        width: 70%;
        left: 15%;
        background-image: url('http://img-miniprogram-o.doutuimao.net/minicms/product/20230711/20230711171027303433.png');
        background-size: 100% 100%;
    }
    .tip{
        z-index: 102;
        position: absolute;
        top: 77%;
        right: 10%;
        width: 50%;
    }
    .content{
        position: absolute;
        z-index: 99;
        top: 30%;
        height: 50%;
        width: 80%;
        left: 10%;
        color: rgb(203,114,0);
        background: rgb(187, 187, 187);
        background-image: url("http://img-miniprogram-o.doutuimao.net/rtsvip/common/2022/08/15/2022081520175685337012.png");
        background-size: 100% 100%;
        .date{
            text-align: center;
            padding: 40rpx;
            .info{
                color: black;
                font-weight: bolder;
                font-size: 50rpx;
                margin:10rpx 0;
            }
            .date-body{
                font-size: 28rpx;
            }
        }
        .meaning{
            background-color: rgb(220,233,233);
            padding: 20rpx;
            font-size: 28rpx;
            color: rgb(124,88,45);
            margin:0  28rpx;
        }
    }
</style>
